html,
body {
	position: relative;
	height: 100%;
}

body {
	background: #eee;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #222;
	margin: 0;
	padding: 0;
	background-image: url(../img/bg.jpg);
	background-position: center;
	background-size: 100% 100%;
}
.music{ z-index: 999; position: fixed; top: 3%; left: 3%; width: 60px; height: 60px; background-size: 100% 100%; background-repeat: no-repeat; }
.music_play{ background-image: url(../img/music_ico_1.png); }
.music_stop{ background-image: url(../img/music_ico_0.png); }

#loading{ position: fixed; z-index: 100; padding-top: 45%; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%; background-image: url(../img/loading.jpg); background-size: 100% 100%; text-align:center;font-size:18px; }
@keyframes ld{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
@-webkit-keyframes ld{ from{ -webkit-transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); } }
/* #loading img{ animation: ld 2s linear infinite; -webkit-animation: ld 2s linear infinite; position: absolute;  width: 10%; top: 40%; left: 45%;  } */
#loading img{ position: absolute;  width: 20%; top: 30%; left: 40%;  }
#loading span{ position: absolute; display: inline-block; width: 100%; text-align: center; left: 0; top:43%; font-size: 2.5em; letter-spacing: 0.1em; font-weight: 600; color: #9C917C; }
#snow{ 
	position: fixed;
	display: none;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: -1;
}
#snow .sn{ background-position: top; background-size: 100% auto; display: none; position: fixed; top: 0px; left:0px; width: 100%; height: 100%; }
@keyframes sn{ 0%{ opacity: 0; } 2%{ opacity: 1; } 23%{ opacity: 1; } 25%{ opacity: 0; } 100%{ opacity: 0; } }
@-webkit-keyframes sn{ 0%{ opacity: 0; } 2%{ opacity: 1; } 23%{ opacity: 1; } 25%{ opacity: 0; } 100%{ opacity: 0; } }
.snmv{ animation: sn 4s linear infinite; -webkit-animation: sn 4s linear infinite; display: block !important; }
#snow .sn1{ background-image: url(../img/snow_1.png); }
#snow .sn2{ background-image: url(../img/snow_2.png); }
#snow .sn3{ background-image: url(../img/snow_3.png); }
#snow .sn4{ background-image: url(../img/snow_4.png); }
.swiper-container {
	width: 100%;
	height: 100%;
}

.swiper-slide {  }
@keyframes pd{ 0%{ bottom: 20px; opacity: 0; }5%{ bottom: 20px; opacity: 1; } 85%{ bottom: 10px; opacity: 1; } 100%{ bottom: 5px; opacity: 0; } }
@-webkit-keyframes pd{ 0%{ bottom: 20px; opacity: 0; }5%{ bottom: 20px; opacity: 1; } 85%{ bottom: 10px; opacity: 1; } 100%{ bottom: 5px; opacity: 0; } }
.point_dowm{ animation: pd 2s linear infinite; -webkit-animation: pd 2s linear infinite; width: 100%; height: 30px; left: 0; bottom: 30px; background-image: url(../img/point_down.png); }

.page{ height: 100%; width: 100%; overflow: hidden; position: relative; }
.page div{ position: relative; position: absolute; background-repeat: no-repeat; background-size: cover; }
.page1 .logo{  top: 0px; right: 0px; background-image: url(../img/logo.png); width: 150px; height: 120px; }
.page1 .p1_img{ width: 100%; background-image: url(../img/p1_img.png); position: absolute; top: 20px; height: 600px; }
 
@keyframes txtmv1{ 0%{ top: 100%; opacity: 0; } 100%{ top: 63%; opacity: 1; } }
@-webkit-keyframes txtmv1{ 0%{ top: 100%; opacity: 0; } 100%{ top: 63%; opacity: 1; } }
.page1 .p1_txt1{ animation: txtmv1 1s both; -webkit-animation: txtmv1 1s both; width: 640px; height: 173px; top: 63%; background-image: url(../img/p1_t1.png); }
@keyframes txtmv2{ 0%{ top: 100%; opacity: 0; } 100%{ top: 83%; opacity: 1; } }
@-webkit-keyframes txtmv2{ 0%{ top: 100%; opacity: 0; } 100%{ top: 83%; opacity: 1; } }
.page1 .p1_txt2{ animation: txtmv2 1.6s both; -webkit-animation: txtmv2 1.6s both; width: 640px; height: 98px; top: 100%; background-image: url(../img/p1_t2.png); }

.page2 .p2_txt{ width: 100%; height: 90px; left: 0; top: 7%; background-image: url(../img/p2_txt.png); }
@keyframes pd2{ 0%{  top:16%; opacity: 0; }5%{ top:17%; opacity: 1; } 85%{ top:19%; opacity: 1; } 100%{ top:20%; opacity: 0; } }
@-webkit-keyframes pd2{ 0%{  top:16%; opacity: 0; }5%{ top:17%; opacity: 1; } 85%{ top:19%; opacity: 1; } 100%{ top:20%; opacity: 0; } }
.page2 .p2_bo{ width: 560px; height: 560px; left: 40px; top: 19%; opacity: 0; background-image: url(../img/p2_bo.png); background-size: 60% 60%; background-position: center;}
@keyframes p2_bo_mv{ 0%{  background-size: 80% 80%; opacity: 1; } 100%{ background-size: 120% 120%; opacity: 1;} }
@-webkit-keyframes p2_bo_mv{ 0%{  background-size: 80% 80%; opacity: 1;} 100%{ background-size: 120% 120%; opacity: 1;} }
.page2 .p2_bo.mv{ animation: p2_bo_mv .8s infinite linear; -webkit-animation: p2_bo_mv .8s infinite linear; }
.page2 .p2_huatong{ width: 560px; height: 560px; left: 40px; top: 22%; background-image: url(../img/p2_huatong.png); }
.page2 .p2_bg{ bottom: 0px; left: 0px; width: 100%; height: 306px; background-image: url(../img/p2_bg.png); }
.page2 .p2_bg_top{ top: 0px; left: 0px; width: 100%; height: 123px; background-image: url(../img/p2_bg_top.png); }
.p2_point_dowm{ animation: pd2 2s linear infinite; -webkit-animation: pd2 2s linear infinite; width: 100%; height: 30px; left: 0; bottom: 60px; background-image: url(../img/point_down.png); }

.page3 .bo_box{ width: 100%; height: 500px; position: relative; top: 20%; }
.page3 .p3_bg_top{ top: 0px; left: 0px; width: 100%; height: 168px; background-image: url(../img/p3_bg_top.png); }
.page3 .p3_bg_bottom{ bottom: 0px; left: 0px; width: 100%; height: 250px; background-image: url(../img/p3_bg_bottom.png); }
.page3 .bo_box .bo{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: none; }
.page3 .bo_box .bo_1{ background-image: url(../img/bo_1.png); display: block; }
.page3 .bo_box .bo_2{ background-image: url(../img/bo_2.png); }
.page3 .bo_box .bo_3{ background-image: url(../img/bo_3.png); }
.page3 .bo_box .bo_4{ background-image: url(../img/bo_4.png); }
.page3 .bo_box .bo_5{ background-image: url(../img/bo_5.png); }
.page3 .p3_btnbox{ bottom: 20px; height: 112px; width: 100%; left: 0px; }
.page3 .p3_btnbox .pbt{ height: 100%; }
.page3 .p3_btnbox .pbtn_1{ background-image: url(../img/p3_btn_1.png); width: 206px; left: 4%; }
.page3 .p3_btnbox .pbtn_2{ background-image: url(../img/p3_btn_2.png); width: 206px; left: 37%; }
.page3 .p3_btnbox .pbtn_3{ background-image: url(../img/p3_btn_3.png); width: 174px; left: 70%; }

.page4 .tree_box{ width: 100%; height: 730px; top: 10%; position: relative; }
.page4 .tree_box .tree{ width: 100%; height: 100%; display: none; }
.page4 .tree_box .tree_0{ background-image: url(../img/tree_0.png); display: block !important; }
.page4 .tree_box .tree_1{ background-image: url(../img/tree_1.png); }
.page4 .tree_box .tree_2{ background-image: url(../img/tree_2.png); }
.page4 .tree_box .tree_3{ background-image: url(../img/tree_3.png); } 
.sz_box { width: 318px; height: 114px; position: relative; display: none; background-image: url(../img/sz_select.png); background-size: 100% 100%; left: 45px; bottom: 150px; }
.sz {   position: absolute; width: 80px; height: 80px; top: 10px; background-color: rgba(255,0,0,0);  }
.sz_1{  left: 10px; }
.sz_2{ left: 120px; }
.sz_3{ left: 230px; }
@keyframes  sz_mv{ 
	0%{ top: 65%; left: 40%;  }
	10%{ top: 60%; left: 15%;  } 
	20%{ top: 57%; left: 75%;  }
	30%{ top: 50%; left: 25%;  } 
	40%{ top: 48%; left: 65%;  } 
	50%{ top: 40%; left: 25%;  }
	60%{ top: 38%; left: 62%;  } 
	70%{ top: 30%; left: 32%;  } 
	80%{ top: 28%; left: 58%;  }
	90%{ top: 20%; left: 38%;  } 
	95%{ top: 5%; left: 45%;  } 
	100%{ top: 5%; left: 75%;  } 
}
@-webkit-keyframes  sz_mv{ 
	0%{ top: 65%; left: 40%;  }
	10%{ top: 60%; left: 15%;  } 
	20%{ top: 57%; left: 75%;  }
	30%{ top: 50%; left: 25%;  } 
	40%{ top: 48%; left: 65%;  } 
	50%{ top: 40%; left: 25%;  }
	60%{ top: 38%; left: 62%;  } 
	70%{ top: 30%; left: 32%;  } 
	80%{ top: 28%; left: 58%;  }
	90%{ top: 20%; left: 38%;  } 
	95%{ top: 5%; left: 45%;  } 
	100%{ top: 5%; left: 75%;  } 
}
.sz_mv{ display: none; animation: sz_mv 2s both; -webkit-animation: sz_mv 2s both; width: 100px; height:144px; position: absolute; }
.sz_mv.sz_sel_1{ background-image: url(../img/p4_sz_1.png);  }
.sz_mv.sz_sel_2{ background-image: url(../img/p4_sz_2.png);  }
.sz_mv.sz_sel_3{ background-image: url(../img/p4_sz_3.png);  }
.page4 .p4_btnbox{ bottom: 20px; height: 112px; width: 100%; left: 0px; }
.page4 .p4_btnbox .pbt{ height: 100%; }
.page4 .p4_btnbox .pbtn_1{ background-image: url(../img/p4_btn_1.png); width: 230px; left: 4%; }
.page4 .p4_btnbox .pbtn_2{ background-image: url(../img/p4_btn_2.png); width: 204px; left: 39%; }
.page4 .p4_btnbox .pbtn_3{ background-image: url(../img/p4_btn_3.png); width: 160px; left: 72%; }

.page5 .p5_bg{ width:100%; height: 100%; top: 0; left: 0; background-image: url(../img/p5_bg_1.jpg); background-position: top; background-size: cover; }
.page5 .p5_bg_2{ width:100%; height: 313px; bottom: 0; left: 0; background-image: url(../img/p5_bg_2.png); background-position: bottom; }

.page5 .p5_tree{ width: 486px; height: 648px; top:23%; left: 2%; }
.page5 .p5_tree.p5_tree_1{ background-image: url(../img/p5_tree_1.png); }
.page5 .p5_tree.p5_tree_2{ background-image: url(../img/p5_tree_2.png); }
.page5 .p5_tree.p5_tree_3{ background-image: url(../img/p5_tree_3.png); }

@-webkit-keyframes  star{ 0%{ -webkit-transform: scale(0.5);} 48%{ -webkit-transform: scale(0.5);} 50%{ -webkit-transform:scale(0.8); } 98%{ -webkit-transform: scale(0.8); } 100%{ -webkit-transform: scale(0.5); } }
@keyframes  star{ 0%{ transform: scale(0.5);} 48%{ transform: scale(0.5);} 50%{ transform:scale(0.8); } 98%{ transform: scale(0.8); } 100%{ transform: scale(0.5); }  }
.page5 .p5_star{animation: star 1s infinite; -webkit-animation: star 1s infinite; opacity: 0.4; background-image: url(../img/p5_start.png); width: 286px; height: 146px; top: 18%; left: 18%; }
.page5 .p5_txt{ background-image: url(../img/p5_txt_1.png); width: 311px; height: 429px; top: 2%; right: 2%; }
.page5 .p5_mv{  width:100%; height: 100%; top: 0; left: 0; }
.page5 .p5_mv .p5mv{ }
@-webkit-keyframes  p5mv{ 0%{ -webkit-transform: rotate(-20deg);} 50%{ -webkit-transform: rotate(20deg);} 100%{ -webkit-transform: rotate(-20deg);} }
@keyframes  p5mv{ 0%{ transform: rotate(-20deg);} 50%{ transform: rotate(20deg);} 100%{ transform: rotate(-20deg);}  }
.mv{ animation: p5mv 5s infinite; -webkit-animation: p5mv 5s infinite; }
.page5 .p5_mv .p5mv_1{ background-image: url(../img/p5_ico1.png); width: 124px; height: 480px; left: 70%; top: -30%; }
.page5 .p5_mv .p5mv_2{ background-image: url(../img/p5_ico2.png); width: 90px; height: 380px; left: 40%; top: -25%; }
.page5 .p5_mv .p5mv_3{ background-image: url(../img/p5_ico3.png); width: 110px; height: 500px; left: -5%; top: -25%; }
.page5 .p5_mv .p5mv_4{ background-image: url(../img/p5_ico4.png); width: 50px; height: 260px; left: 10%; top: -18%; }

.page5 .p5_btnbox{ bottom: 20px; height: 72px; width: 100%; left: 0px; }
.page5 .p5_btnbox .pbt{ height: 100%; }
.page5 .p5_btnbox .pbtn_1{ background-image: url(../img/p5_btn_1.png); width: 220px; left: 10%; }
.page5 .p5_btnbox .pbtn_2{ background-image: url(../img/p5_btn_2.png); width: 260px; left: 50%; }

.page5 .page_set{ width: 100%; height: 100%; }
.page5 .page_view{ width: 100%; height: 100%; display: none; }

.page5 .card{ position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; }  
.page5 .card.card_1{ background-image: url(../img/card_1.jpg); }
.page5 .card.card_2{ background-image: url(../img/card_2.jpg); }
.page5 .card.card_3{ background-image: url(../img/card_3.jpg); } 

@keyframes cardmv{
	0%{ width: 100%; height: 100%; left: 0px; top: 0px; }
	40%{ transform: rotate(-8deg) scale(0.6);  width: 100%; height: 100%; left: -12%; top: -40%; }
	100%{ transform: rotate(-9.5deg) scale(0.6);  width: 100%; height: 60%; left: -3%; top: 18%; }
} 
@-webkit-keyframes cardmv{
	0%{ width: 100%; height: 100%; left: 0px; top: 0px; }
	40%{ -webkit-transform: rotate(-8deg) scale(0.6);  width: 100%; height: 100%; left: -12%; top: -40%; }
	100%{ -webkit-transform: rotate(-9.5deg) scale(0.6);  width: 100%; height: 60%; left: -3%; top: 18%; }
}

.page5 .card.mv{ animation: cardmv 2s both; -webkit-animation: cardmv 2s both; } 

.page5 .box_back,.page5 .box_front{ width: 100%; height: 460px; top: 30%; left: 0%; }
.page5 .box_back{ background-image: url(../img/card_back.png); }
.page5 .box_front{ background-image: url(../img/card_front.png); display: none; }

@keyframes pt5mv{ 0%{ bottom: -50%;  } 100%{ bottom: 0%;  } } 
@-webkit-keyframes pt5mv{ 0%{ bottom: -50%;  } 100%{ bottom: 0%;  } }  
.p5_txt_2{ background-image:url(../img/p5_txt_2.png); bottom: -50%; height: 218px; width: 100%; }
.p5_txt_2.mv{ animation: pt5mv .5s both; -webkit-animation: pt5mv .5s both; }

.hz{ display: none; width: 274px; height: 256px; position: relative; top: 7.3%; left: 25%; }
.hz .hz_body , .hz .hz_head{ width: 100%; height: 100%; }
.hz .hz_body{ background-image: url(../img/hz_body.png);}

@keyframes hz_head{ 0%{ transform: rotate(10deg);  }  5%{ transform: rotate(-10deg);  }  45%{ transform: rotate(-10deg);  }  50%{ transform: rotate(10deg); } 55%{ transform: rotate(-10deg); } 95%{ transform: rotate(-10deg);  } 100%{ transform: rotate(10deg);  } } 
@-webkit-keyframes hz_head{ 0%{ -webkit-transform: rotate(10deg);  }  5%{ -webkit-transform: rotate(-10deg);  }  45%{ -webkit-transform: rotate(-10deg);  } 50%{ -webkit-transform: rotate(10deg); }  55%{ -webkit-transform: rotate(-10deg); } 95%{ -webkit-transform: rotate(-10deg); } 100%{ -webkit-transform: rotate(10deg);  } }  
.hz .hz_head{ background-image: url(../img/hz_head.png); animation: hz_head 4s infinite; animation: hz_head 4s infinite}

#share{ display: none; position: fixed; width: 100%; z-index: 999; height: 100%; left: 0px; top: 0px; background-image: url(../img/share.png); background-position: top; background-repeat: no-repeat; background-size: 100% auto; background-color: rgba(0,0,0,0.8); }
